<template>
  <div class="warpbg">
    <div class="title">
      <div class="largetitle">招商新模式</div>
      <div>重塑企业与客户的连接</div>
    </div>
    <div class="contentwarp">
      <img src="/image/home/newmode.png" alt="" />
      <div>
        <div class="items">
          <img src="/image/summarizing/招商app.png" alt="" /><span
            >招商APP定制</span
          >
        </div>
        <div class="items">
          <img src="/image/summarizing/小程序.png" alt="" /><span
            >招商小程序定制</span
          >
        </div>
        <div class="items">
          <img src="/image/summarizing/数据.png" alt="" /><span
            >数据管控系统定制</span
          >
        </div>
        <div class="items">
          <img src="/image/summarizing/流程.png" alt="" /><span
            >在线招商全流程定制</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.warpbg {
  position: relative;
  min-width: 1366px;
  width: 100%;
  background: url("http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/summarizingbg.png-1593683866000")
    no-repeat;
  background-size: 100% 100%;
  padding-bottom: 100px;
}
.title {
  padding-top: 60px;
  text-align: center;
  align-items: center;
  justify-content: center;
  .largetitle::before,
  .largetitle::after {
    content: "";
    display: inline-block;
    width: 256px;
    height: 2px;
    margin-bottom: 10px;
    background: url("/image/home/largetitlebefore.png") no-repeat;
    background-size: 100% 100%;
    margin-right: 22px;
  }
  .largetitle::after {
    background: url("/image/home/largetitleafter.png") no-repeat;
    margin-right: 0;
    background-size: 100% 100%;
    margin-left: 22px;
  }
  div:first-of-type {
    font-size: 30px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
  }
  div:last-of-type {
    margin-top: 14px;
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 74px;
  }
}
.contentwarp {
  display: flex;
  justify-content: center;
  & > img {
    width: 706px;
    height: 459px;
  }
  & > div > div {
    margin-bottom: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    & > img {
      width: 55px;
      height: 55px;
    }
    & > span {
      line-height: 18px;
      margin-top: 10px;
      font-size: 17px;
      font-weight: 500;
      color: rgba(68, 68, 68, 1);
    }
  }
}
</style>
